<template>
  <div>
    <div class="header">
      <h3><i class="el-icon-office-building"></i> {{ title }}类房产详情</h3>
    </div>
    <div v-if="properties.length == 0">
      <el-empty  image='https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F115eaf6bede4617a0be70f980fef9575fa22a0a360a9-KytOkD_fw658&refer=http%3A%2F%2Fhbimg.b0.upaiyun.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1641642414&t=77fb4857c1727d6ae20f7103d68dc436'  :image-size="800">
        <template #description>
  <p class="tips">{{title}}   下暂无在售房型,返回  <a  class="btnreturn" href="#/Category">主页</a> 看看其他户型吧!</p>
        </template>
      </el-empty>
    </div>
    <el-card class="box-card" v-for="item in properties" :key="item.id" v-else>
      <el-row type="flex">
        <div class="Bigimage">
          <h1 class="title">{{ item.title }}</h1>
          <img :src="item.image" alt="" />
        </div>
        <div class="demo">
          <div class="photos">
                <img
              :src="img"
              alt=""
              v-for="(img, ind) in item.photos"
              :key="ind"
              title="点击查看大图" 
              @click="picShow(img)"
            />
            <el-image-viewer style="width:800px;height:600px;margin:50px auto;" v-if="showViewer"  :on-close="closeViewer" :url-list="srcList"/>
          </div>
          <el-row type="flex" justify="start">
            <div class="tag-group">
              <span class="tag-group__title">所属标签:</span>
              <el-tag
                v-for="tag in item.tags"
                :key="tag"
                type="info"
                effect="dark"
              >
                {{ tag }}
              </el-tag>
            </div>
          </el-row>
          <div class="desc"><b>房型简介:</b> {{ item.desc }}</div>
          <el-row type="flex" justify="end">
            <b class="price">
              <i class="el-icon-coin"></i> 价格:{{
                item.price == null ? "暂未定价" : item.price
              }}</b
            >
          </el-row>
        </div>
      </el-row>

      <el-card class="box-card">
        <h3>内容：</h3>
        <div v-html="item.content">
        </div>
      </el-card>
    </el-card>
  </div>
</template>

<script>
import { GetCategorydetails } from "@/api";
import ElImageViewer from "element-ui/packages/image/src/image-viewer";
export default {
  components: { ElImageViewer },
  async created() {
    let { data } = await GetCategorydetails(this.$route.params.id);
    this.properties = data.properties;
    console.log(30, this.properties);
    this.title = data.title;
  },
  data() {
    return {
      title: "",
      properties: [],
      srcList:[],
      showViewer:false
    };
  },
  methods:{
     picShow(img){
       this.showViewer = true  
       console.log(85,img)
      this.srcList[0] = img
      
     },
     closeViewer(){
       this.showViewer = false,
       this.srcList = []
     }
  }
};
</script>

<style lang="less" scoped>
.Bigimage {
  width: 500px;
  height: 500px;
  overflow: hidden;
  img {
    width: 100%;
    height: 100%;
  }
}
.photos {
  display: flex;
  // flex-direction: column;
  // flex-wrap: nowrap;
  justify-content: space-evenly;
  img {
    width: 150px;
    height: 150px;
    
  }
}

.tips {
  font-size: 30px;
}
/deep/.el-button {
  font-size: 16px;
  padding: 15px 15px;
}

.btnreturn{
    color: #4db984;
    text-decoration: none;
}

.el-tag{
  margin: 0 5px;
  font-size: 18px;
}

.tag-group{
  margin-left: 30px;
}
.desc{
  width: 600px;
  height:210px;
  border: 1px solid #909399;
  margin-left: 20px;
  display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 9;
overflow: hidden;
}
.price{
  color: red;
}
</style>

<style>
.el-image-viewer__wrapper .el-image-viewer__canvas .el-image-viewer__img {
  width: 600px;
  height: 500px;
}
</style>